<template>
  <q-layout view="hHh lpR fFf">

    <q-header elevated class="bg-primary text-white">
      <q-toolbar>
        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />

        <q-toolbar-title>
          <q-avatar>
            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg">
          </q-avatar>
          雀鸣后台管理
        </q-toolbar-title>

        <q-space/>
        <el-dropdown>

            <q-avatar color="teal" text-color="white">{{nickname}}</q-avatar>

          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

      </q-toolbar>
    </q-header>

    <q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
      <q-list  padding class="rounded-borders text-primary">
        <q-item
            clickable
            v-ripple
            active-class="my-menu-link"
            v-for="item in menuRoutes"
            :key="item.meta.title"
            :active="item.name===route.name"
            :to="item.path"
        >
          <q-item-section avatar>
            <q-icon :name="item.meta.icon" />
          </q-item-section>

          <q-item-section>{{item.meta.title}}</q-item-section>
        </q-item>


      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>

  </q-layout>
</template>

<script>

import {useStore} from 'vuex'
import {computed,ref} from 'vue'
import {menuRoutes} from "../router";
import {useRoute} from 'vue-router'
export default {
  name: "Layout",
  setup () {
    const leftDrawerOpen = ref(false);
    const store =useStore();
    const route=useRoute();
    return {
      nickname: computed(() => store.getters['user/nicknameFirstWord']),
       leftDrawerOpen,
      toggleLeftDrawer(){
        leftDrawerOpen.value=!leftDrawerOpen.value
      }
      ,menuRoutes,
      route,
      logout:()=> store.dispatch('user/logout').then(()=>window.location.reload())
    }
  }
}

</script>

<style lang="sass">
.my-menu-link
  color: white
  background: #F2C037
</style>